<template>
<div>
  <echarts
    ref="charts"
    width="60%"
    height="600px"
    v-show="!loading"
  />
  <skeleton
    v-show="loading"
    type="custom"
    :options="{ width: '100%', height: '50vh' }"
    :childrenOption="[
     {type: 'listcom', active: true},
    {type: 'card',rules:'d', active: true,options:{width:'400px'}}
]" />
</div>
</template>

<script>
import echarts from '@/components/echarts'
import { getTeacher,stuNums,couTotal } from '@/api/dashboard'

export default {
  name: 'admin',
  components:{echarts},
  data() {
    return {
      loading:true,
      option:{
        title: {
          text: '校区统计',
          subtext: '本年度',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          formatter:(name)=>{
            const arr = this.option.series[0].data
            for (let i=0;i<arr.length;i++){
              if (name===arr[i].name){
                return `${name}  ${arr[i].value}人`
              }
            }
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data:[
              {value: 0, name: '开设课程'},
              {value: 0, name: '学生总数'},
              {value: 0, name: '教员总数'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(){
      const tn = await getTeacher()
      const sn = await stuNums()
      const cn = await couTotal()
      this.option.series[0].data[0].value = cn.data
      this.option.series[0].data[1].value = sn.data
      this.option.series[0].data[2].value = tn.data
      this.loading = false
      setTimeout(()=>{
        this.$refs.charts.echartsInit(this.option)
      },500)
    }
  }
}
</script>

<style scoped>

</style>
